/**
Combotext editable input.
Internally value stored as {city: "Moscow", street: "Lenina", building: "15"}

@class combotext
@extends abstractinput
@final
@example
<a href="#" id="combotext" data-type="combotext" data-pk="1">awesome</a>
<script>
$(function(){
    $('#combotext').editable({
        url: '/post',
        title: 'Enter city, street and building #',
        value: {
            city: "Moscow", 
            street: "Lenina", 
            building: "15"
        }
    });
});
</script>
**/
(function ($) {
    "use strict";
    
    var Combotext = function (options) {
        this.init('combotext', options, Combotext.defaults);
    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(Combotext, $.fn.editabletypes.abstractinput);

    $.extend(Combotext.prototype, {
        /**
        Renders input from tpl
        @method render() 
        **/        
        render: function() {
           this.$input = this.$tpl.find('input,select');
        },
        
        /**
        Default method to show value in element. Can be overwritten by display option.
        
        @method value2html(value, element) 
        **/
        value2html: function(value, element) {
            if(!value) {
                $(element).empty();
                return; 
            }
            var html = $('<div>').text(value.name).html();
            $(element).html(html); 
        },
        
        /**
        Gets value from element's html
        @method html2value(html) 
        **/        
        html2value: function(html) {
        	return null;  
        },
      
       /**
        Converts value to string. 
        It is used in internal comparing (not for sending to server).
        
        @method value2str(value)  
       **/
       value2str: function(value) {
           var str = '';
           if(value) {
               for(var k in value) {
                   str = str + k + ':' + value[k] + ';';  
               }
           }
           return str;
       }, 
       
       /*
        Converts string to value. Used for reading value from 'data-value' attribute.
        
        @method str2value(str)  
       */
       str2value: function(str) {
           /*
           this is mainly for parsing value defined in data-value attribute. 
           If you will always set value by javascript, no need to overwrite it
           */
           return str;
       },                
       
       /**
        Sets value of input.
        
        @method value2input(value) 
        @param {mixed} value
       **/         
       value2input: function(value) {
           if(!value) return;
           
           this.$input.filter('[name="relation"]').val(value.relation);
           this.$input.filter('[name="name"]').val(value.name);
       },       
       
       /**
        Returns value of input.
        
        @method input2value() 
       **/          
       input2value: function() { 
           return {
              relation: this.$input.filter('[name="relation"]').val(), 
              name: this.$input.filter('[name="name"]').val()
           };
       },        
       
        /**
        Activates input: sets focus on the first field.
        
        @method activate() 
       **/        
       activate: function() {
            this.$input.filter('[name="name"]').focus();
       },  
       
       /**
        Attaches handler to submit form in case of 'showbuttons=false' mode
        
        @method autosubmit() 
       **/       
       autosubmit: function() {
           this.$input.keydown(function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
           });
       }       
    });

    Combotext.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: createTemplate(),
             
        inputclass: ''
    });

    $.fn.editabletypes.combotext = Combotext;
    
    function createTemplate(){
    	var _html = '<div>'
    			  +	'<div class="editable-combotext">'
    			  + 	'<label>'
    			  + 		'<span>&emsp;关系：</span>'
    			  +			'<select name="relation" class="form-control" id="relation"></select>'
    			  +		'</label>'
    			  +	'</div>'
    			  + '<div class="editable-combotext">'
    			  +		'<label>'
    			  +			'<span>&emsp;姓名：</span><input type="text" name="name" class="form-control">'
    			  +		'</label>'
    			  +	'</div>';
    	
	
    	var template = jQuery(_html);
    	var _select = template.find("#relation");
    	jQuery.ajaxsend({
    		url:"/miwawa/system/codec/select.json",
    		data:{"pcode":"c_parent_title"},
    		async:false,
    		success:function(data){
    			jQuery.each(data,function(i,n){
        			_select.append('<option value="'+n.value+'">'+n.text+'</option>');
    			});
    		}
    	});
    	return template.html();
    }

}(window.jQuery));